<template>
	<view class="scanRecordBox">
		<view class="navBox">
			<u-navbar title="扫码记录" :autoBack="true" :titleStyle="{fontWeight:'900'}" bgColor="#ffffff">
			</u-navbar>
		</view>
		<view class="topBox" :style="'top:'+(customBarHeight*2)+'rpx;'">
			<image src="../../static/images/scanRecordBg.png" class="recordBg"></image>
			<view class="searchBox">
				<u-icon name="search" color="#49a1fd" size="40"></u-icon>
				<u-input border="none" placeholder="搜索学校名称" v-model="school_name" @confirm="getScanLogs"
					:clearable="true" @clear="clearSearch"></u-input>
			</view>
			<view class="selectBox">
				<view class="selectProject">
					<ep-select v-model="project_id" :options="selectOptions" @change="changeProject" value_key="id"
						label_key="name"></ep-select>
				</view>
				<view class="selectDate">
					<select-date :date="scan_date" @selectDate="selectDate"></select-date>
				</view>
			</view>
		</view>
		<view class="scanRecordList" :style="'top:'+(236+(customBarHeight*2))+'rpx;'" v-if="scanRecordList.length>0">
			<view class="scanRecordItem scanRecordHead">
				<view class="column1">项目</view>
				<view class="column2">学校</view>
				<view class="column3">扫码账户</view>
				<view class="column4">日期</view>
			</view>
			<view :class="index %2==0?'scanRecordItem':'scanRecordItem bgGrey'" v-for="(item,index) in scanRecordList"
				:key="index">
				<view class="column1">{{item.project_name}}</view>
				<view class="column2">{{item.school_name}}</view>
				<view class="column3">{{item.user_name}}</view>
				<view class="column4">{{item.scan_date}}</view>
			</view>
			<view class="fillBox"></view>
		</view>
		<view class="noData" v-else>
			<image src="../../static/images/nodata.png" class="image"></image>
			<view class="text">您暂时还没有扫码记录哦～</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getScanLogs,
		getAllProject
	} from "@/api/api.js"
	export default {
		data() {
			return {
				school_name: "", //学校名称
				project_id: null,
				selectOptions: [], //选择配置列表
				experienceList: [], //体验项目列表
				scan_date: "",
				scanRecordList: [], //观看记录列表
				customBarHeight: Number(44 + app.globalData.statusBar),
			}
		},
		onLoad() {
			this.initDate()
			this.getScanLogs()
			this.getAllProject()
		},
		methods: {
			initDate() {
				const now = new Date();
				const year = now.getFullYear();
				let month = now.getMonth() + 1;
				let day = now.getDate();
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				this.scan_date = year + '-' + month + '-' + day
			},
			selectDate(e) {
				this.scan_date = e
				this.getScanLogs()
			},
			changeProject(e) {
				if (e.id == 0) {
					this.project_id = null
					this.getAllProject()
				} else {
					this.project_id = e.id
					this.experienceList = [{
						...e
					}]
				}
				this.getScanLogs()
			},
			clearSearch() {
				this.school_name = null
				this.getScanLogs()
			},
			getAllProject() {
				getAllProject().then(res => {
					let projectList = [{
						id: 0,
						name: '全部'
					}]
					this.experienceList = res.data
					this.selectOptions = projectList.concat(res.data)
				})
			},
			getScanLogs() {
				getScanLogs({
					scan_date: this.scan_date,
					school_name: this.school_name,
					project_id: this.project_id,
				}).then(res => {
					this.scanRecordList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fillBox {
		width: 100%;
		height: 108rpx;
		background: #f8f8f8;
	}

	.noData {
		padding-top: 490rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.scanRecordBox {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.navBox {
		position: relative;
		z-index: 1000;
	}

	.topBox {
		width: 100%;
		position: fixed;
		top: 160rpx;
		z-index: 100;

		.recordBg {
			position: fixed;
			width: 100%;
			height: 236rpx;
		}

		.searchBox {
			position: relative;
			display: flex;
			margin: 20rpx 34rpx;
			align-items: center;
			padding: 0 20rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
			border-radius: 24rpx;
		}

		/deep/ .searchBox .u-input {
			height: 100%;
			padding: 0 20rpx !important;
		}

		.selectBox {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 34rpx;

			.selectProject,
			.selectDate {
				width: 48%;
				height: 88rpx;
				border-radius: 24rpx;
				border: 2rpx solid #FFFFFF;
			}

		}
	}

	.scanRecordList {
		position: relative;

		.column1 {
			width: 20%;
			padding: 0 10rpx;
			text-align: center;
		}

		.column2 {
			width: 38%;
			padding: 0 10rpx;
			text-align: center;
		}

		.column3 {
			width: 20%;
			padding: 0 10rpx;
			text-align: center;
		}

		.column4 {
			width: 22%;
			padding: 0 10rpx;
			text-align: center;
		}

		.scanRecordItem {
			padding: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #000000;
			font-size: 24rpx;
			background: #FFFFFF;
		}

		.bgGrey {
			background: #F0F0F0;
		}

		.scanRecordHead {
			height: 80rpx;
			background: #F0F0F0;
			font-weight: bold;
			font-size: 30rpx;
			box-sizing: border-box;
		}
	}
</style>